<!doctype html>
<html xmlns:th="http://www.springframework.org/schema/data/jaxb">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<title>电影选购</title>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../showstatic/css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../showstatic/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../showstatic/js/phone.js" ></script>
<script type="text/javascript" src="../showstatic/js/TouchSlide.1.1.js"></script>
<script type="text/javascript" src="../showstatic/js/movie.js"></script>
</head>


<body>
<div class="whole">
	<!--头部轮播-->
    <div id="carousel" class="carousel">
	  	<div class="hd">
			<ul id="hd"></ul>
      	</div>
      <div class="bd">
            <ul>
                <li><img id="img1" _src="../showstatic/image/lunbo.jpg" src="../showstatic/image/blank.png" /></li>
                <li><img id='img2' _src='../showstatic/image/lunbo1.jpg' src='../showstatic/image/blank.png'/></li>
                <li><img id='img3' _src='/upload/20190617052112254.jpg' src='../showstatic/image/blank.png'/></li>
            </ul>
      </div>
        <div class="search sear-show">
        	<img src="../showstatic/image/search.png" onclick="searon()"/>
        </div>
    </div>
    <!--头部轮播END-->

    <div class="movie">
      <ul id="movies">

      </ul>

    </div>
    <!--position: fixed-->
    <div class="footer" style="width: 100%;height: 150px;background-color: whitesmoke;">
        <div>
            <div style="width: 33%;float: right;text-align: center;padding-top: 25px">

                <a  href="/movieshow/userinfo.html">
                    <img src="../image/index.svg" alt="" style="width: 80px;height: 80px ;">
                </a>
            </div>
            <div style="width: 33%;float: right;text-align: center;padding-top: 25px">

                <a  href="/movieshow/userorder.html">
                    <img src="../image/myorder.svg" alt="" style="width: 80px;height: 80px ;">
                </a>
            </div>
            <div style="width: 33%;float: right;text-align: center;padding-top: 25px">
                <a  href="/movieshow/userinfo.html">
                    <img src="../image/my.svg" alt="" style="width: 80px;height: 80px ;">
                </a>
            </div>
        </div>
        <div>
            <div style="width: 33%;text-align: center;float: right">首页</div>
            <div style="width: 33%;text-align: center;float: right">订单</div>
            <div style="width: 33%;text-align: center;float: right">我的</div>
        </div>


    </div>

</div>
<script type="text/javascript">
	TouchSlide({
		slideCell:"#carousel",
		titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
		mainCell:".bd ul",
		effect:"left",
		autoPlay:true,//自动播放
		autoPage:true, //自动分页
		switchLoad:"_src" //切换加载，真实图片路径为"_src"
	});
</script>
<script th:src="@{/managerstatic/plugins/jquery.min.js}"></script>
<script th:src="@{/managerstatic/plugins/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">
    function searon() {
        window.location="/movieshow/search.html"

    }

    var websocket;

    // 首先判断是否 支持 WebSocket
    if('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/wsMy?jspCode=AA");
    } else if('MozWebSocket' in window) {
        websocket = new MozWebSocket("ws://localhost:8080/wsMy?jspCode=AA");
    } else {
        websocket = new SockJS("ws://localhost:8080/wsMy?jspCode=AA");
    }

    // 打开连接时
    websocket.onopen = function(event) {
        // onLoad="doLoad()"
        // doLoad();
        // var cnt = 0;
        // function doLoad()
        // {
        //     cnt++;
        //     alert(cnt);
        //
        //     //every five seconds to repeat self
        //     setTimeout("doLoad()",1000*5);
        //
        // }
        console.log(" websocket.onopen  ");
    };

    // 收到消息时
    websocket.onmessage = function(event) {



        console.log("收到一条消息"+event.data);
        alert(event.data);
        layui.use('table', function(){
            var table = layui.table;
            // var html = '<iframe src="'+'/moviemanager/pages/userRights/user_lc.html'+'" frameborder="no" height="520px" width="100%"></iframe>';
            var html = '<iframe src="'+'/schedule/msg'+'" frameborder="no" height="100%" width="100%"></iframe>';
            layer.open({
                area: ['100%', '100%'],
                title: '热点推送',
                type: 1
                ,content:html
            });
        });

    };

    websocket.onerror = function(event) {
        console.log("  websocket.onerror  ");
    };

    websocket.onclose = function(event) {
        console.log("  websocket.onclose  ");
    };

    $.ajax({
        url: '/movie/findAll',
        type: 'post',
        async:false,
        success: function(data){
                var ul = $("#movies");
                for(var i=0; i<data.result.length;i++){
                    var li = $(" <li><a href='/movie/findMovieById?id="+data.result[i].cinemaMovies.id+"'><span class='tag'>"+data.result[i].comment+"</span>\n" +
                        "                    <div class='posters'>\n" +
                        "                        <img src='"+data.result[i].cinemaMovies.img+"' />\n" +
                        "                    </div>\n" +
                        "                    <div class='post-content'>\n" +
                        "                        <div class='left-con'>\n" +
                        "                            <p class='tit'>\n" +
                        "                            \t<small>"+data.result[i].cinemaMovies.movename+"</small>\n" +
                        "                                <span>\n" +
                        "                                \t<i>3D</i>\n" +
                        "                                    <i>IMAX</i>\n" +
                        "                                </span>\n" +
                        "                            </p>\n" +
                        "                            <p class='eng'>"+data.result[i].cinemaMovies.director+"</p>\n" +
                        "                            <p class='act'>"+data.result[i].cinemaMovies.mainactor+"</p>\n" +
                        "                            <p class='tim'>时长<span>"+data.result[i].cinemaMovies.duration+"</span></p>\n" +
                        "                        </div>\n" +
                        "                        <div class='right-btn'>\n" +
                        "                            <div class='ticket-btn'>购票</div>\n" +
                        "                        </div>\n" +
                        "                    </div>\n" +
                        "                 </a>\n" +
                        "            </li>");

                    ul.append(li);
                }
            }

    })
</script>
</body>
</html>
